<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			
		</title>
		<style>
				/* 练习：1圆形  2.正三角形
				思路1：宽高边框倒角一致
				*/
			   div#zero{
				   width: 400px;
				   height: 400px;
				   border: 1px solid red;
				   border-radius: 50%;
				   /* 边框阴影 box-shadow 属性 */
				   box-shadow: 5px 5px 50px 50px red inset;
			   }
			   /* 
				思路2：div#triangle
					             css中：抓到div  
				                 左边框： 50像素实线红色
								 右边框：50像素实线黄色
								 下边框：50像素实线黑色
				注意：先别加宽高    transparent 透明色
				*/
			   div#triangle{
				   width: 0%;
				  /* border-left:50px solid transparent;
				   border-right: 50px solid transparent;
				   border-bottom: 50px solid black; */
				   
				   /* 两行：倒三角、蓝色
					提醒：所有边框：50px solid transparent
					     上边框颜色改成蓝色  0，0，255
					*/
				   border: 50px solid transparent;
				   border-right-color:rgba(0, 0, 255, .3);
			   }
			   /* outline  边框轮廓 只针对input 元素 */
			   input{
				   outline: 1px solid red;
			   }
			   /* 实际应用：通配选择器 去掉轮廓
				{outline  0；}*/
			</style>
	</head>
	<body>
		<div id="zero"></div>
		<div id="triangle"></div>
		边框：<input type="text">
	</body>
</html>